<% if articles && articles.any? %>
  <section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next">
    <h2 class="crayons-subtitle-1"><%= t("views.articles.read_next") %></h2>
    <% articles.each do |article| %>
      <a href="<%= article.path %>" data-preload-image="<%= cloud_cover_url(article.main_image) %>" class="crayons-link mt-6 block">
        <div class="flex items-center">
          <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0">
            <% if article.cached_user.profile_image_url %>
              <%= optimized_image_tag(article.cached_user.profile_image_url,
                                      optimizer_options: { crop: "crop", width: 100, height: 100 },
                                      image_options: { loading: "lazy", alt: "#{article.cached_user.username} profile image", class: "crayons-avatar__image" }) %>
            <% end %>
          </span>
          <div>
            <h3 class="fs-xl mb-0 lh-tight"><%= article.title %></h3>
            <p class="opacity-75 pt-1">
              <%= article.cached_user.name %> - <time datetime="<%= article.published_timestamp %>"><%= article.readable_publish_date %></time>
            </p>
          </div>
        </div>
      </a>
    <% end %>
  </section>
<% end %>
